<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/iframe-embed-object.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=images.html>← 4.8.4 Images</a> — <a href=index.html>Table of Contents</a> — <a href=media.html>4.8.8 The video element →</a></nav><ol class=toc><li><ol><li><ol><li><a href=iframe-embed-object.html#the-iframe-element><span class=secno>4.8.5</span> The
  <code>iframe</code> element</a><li><a href=iframe-embed-object.html#the-embed-element><span class=secno>4.8.6</span> The <code>embed</code> element</a><li><a href=iframe-embed-object.html#the-object-element><span class=secno>4.8.7</span> The <code>object</code> element</a></ol></ol></ol><h4 id=the-iframe-element><span class=secno>4.8.5</span> The
  <dfn data-dfn-type=element><code>iframe</code></dfn> element<a href=#the-iframe-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe title="The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.">Element/iframe</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>15+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>14+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-iframe-element:concept-element-categories>Categories</a>:<dd><a id=the-iframe-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-iframe-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-iframe-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd><a id=the-iframe-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a id=the-iframe-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-iframe-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-iframe-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-iframe-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-iframe-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-iframe-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-iframe-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-iframe-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-iframe-element:attr-iframe-src><a href=#attr-iframe-src>src</a></code> —  Address of the resource
     <dd><code id=the-iframe-element:attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> —  A document to render in the <code id=the-iframe-element:the-iframe-element><a href=#the-iframe-element>iframe</a></code>
     <dd><code id=the-iframe-element:attr-iframe-name><a href=#attr-iframe-name>name</a></code> —  Name of <a id=the-iframe-element:content-navigable href=document-sequences.html#content-navigable>content navigable</a>
     <dd><code id=the-iframe-element:attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> —  Security rules for nested content
     <dd><code id=the-iframe-element:attr-iframe-allow><a href=#attr-iframe-allow>allow</a></code> —  <a href=https://w3c.github.io/webappsec-feature-policy/#permissions-policy id=the-iframe-element:concept-permissions-policy data-x-internal=concept-permissions-policy>Permissions policy</a> to be applied to the <code id=the-iframe-element:the-iframe-element-2><a href=#the-iframe-element>iframe</a></code>'s contents
     <dd><code id=the-iframe-element:attr-iframe-allowfullscreen><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> —  Whether to allow the <code id=the-iframe-element:the-iframe-element-3><a href=#the-iframe-element>iframe</a></code>'s contents to use <code id=the-iframe-element:dom-element-requestfullscreen><a data-x-internal=dom-element-requestfullscreen href=https://fullscreen.spec.whatwg.org/#dom-element-requestfullscreen>requestFullscreen()</a></code>
     <dd><code id=the-iframe-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> —  Horizontal dimension
     <dd><code id=the-iframe-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> —  Vertical dimension
     <dd><code id=the-iframe-element:attr-iframe-referrerpolicy><a href=#attr-iframe-referrerpolicy>referrerpolicy</a></code> —  <a id=the-iframe-element:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>Referrer policy</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-iframe-element:concept-fetch data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dd><code id=the-iframe-element:attr-iframe-loading><a href=#attr-iframe-loading>loading</a></code> —  Used when determining loading deferral
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-iframe-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-iframe>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-iframe>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-iframe-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLIFrameElement</code>.</dl>

  

  <p>The <code id=the-iframe-element:the-iframe-element-4><a href=#the-iframe-element>iframe</a></code> element <a id=the-iframe-element:represents href=dom.html#represents>represents</a> its <a id=the-iframe-element:content-navigable-2 href=document-sequences.html#content-navigable>content navigable</a>.</p>


  

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-src data-dfn-type=element-attr><code>src</code></dfn> attribute
  gives the <a id=the-iframe-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of a page that the element's <a id=the-iframe-element:content-navigable-3 href=document-sequences.html#content-navigable>content navigable</a> is to
  contain. The attribute, if present, must be a <a id=the-iframe-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</a>. If the <code id=the-iframe-element:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is specified on an
  <code id=the-iframe-element:the-iframe-element-5><a href=#the-iframe-element>iframe</a></code> element, then the <code id=the-iframe-element:attr-iframe-src-2><a href=#attr-iframe-src>src</a></code> attribute must
  also be specified.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-srcdoc title="The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.">Element/iframe#attr-srcdoc</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>25+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=iframe id=attr-iframe-srcdoc data-dfn-type=element-attr><code>srcdoc</code></dfn>
  attribute gives the content of the page that the element's <a id=the-iframe-element:content-navigable-4 href=document-sequences.html#content-navigable>content navigable</a> is to
  contain. The value of the attribute is used to <a href=browsing-the-web.html#create-navigation-params-from-a-srcdoc-resource id=the-iframe-element:create-navigation-params-from-a-srcdoc-resource>construct</a> <dfn id=an-iframe-srcdoc-document data-export="">an <code>iframe</code> <code>srcdoc</code> document</dfn>, which is a <code>Document</code> whose
  <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-iframe-element:the-document's-address" data-x-internal="the-document's-address">URL</a> <a id=the-iframe-element:matches-about:srcdoc href=urls-and-fetching.html#matches-about:srcdoc>matches <code>about:srcdoc</code></a>.</p>

  <p>The <code id=the-iframe-element:attr-iframe-srcdoc-2><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute, if present, must have a value
  using <a id=the-iframe-element:syntax href=syntax.html#syntax>the HTML syntax</a> that consists of the following syntactic components, in the
  given order:</p>

  <ol><li>Any number of <a href=syntax.html#syntax-comments id=the-iframe-element:syntax-comments>comments</a> and <a id=the-iframe-element:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
   whitespace</a>.<li>Optionally, a <a href=syntax.html#syntax-doctype id=the-iframe-element:syntax-doctype>DOCTYPE</a>.

   <li>Any number of <a href=syntax.html#syntax-comments id=the-iframe-element:syntax-comments-2>comments</a> and <a id=the-iframe-element:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
   whitespace</a>.<li>The <a id=the-iframe-element:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>, in the form of an <code id=the-iframe-element:the-html-element><a href=semantics.html#the-html-element>html</a></code> <a href=syntax.html#syntax-elements id=the-iframe-element:syntax-elements>element</a>.<li>Any number of <a href=syntax.html#syntax-comments id=the-iframe-element:syntax-comments-3>comments</a> and <a id=the-iframe-element:space-characters-3 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
   whitespace</a>.</ol>

  <p class=note>The above requirements apply in <a id=the-iframe-element:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a> as well.

  <div class=example>

   <p>Here a blog uses the <code id=the-iframe-element:attr-iframe-srcdoc-3><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute in conjunction
   with the <code id=the-iframe-element:attr-iframe-sandbox-2><a href=#attr-iframe-sandbox>sandbox</a></code> attribute described below to provide
   users of user agents that support this feature with an extra layer of protection from script
   injection in the blog post comments:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->I got my own magazine!<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->After much effort, I&apos;ve finally found a publisher, and so now I
 have my own magazine! Isn&apos;t that awesome?! The first issue will come
 out in September, and we have articles about getting food, and about
 getting in boxes, it&apos;s going to be great!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Written by <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/users/cap&quot;</c-><c- p>&gt;</c->cap<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->, 1 hour ago.
 <c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c-> Thirteen minutes ago, <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/users/ch&quot;</c-><c- p>&gt;</c->ch<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> wrote: <c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-> <c- e>srcdoc</c-><c- o>=</c-><c- s>&quot;&lt;p&gt;did you get a cover picture yet?&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c-> Nine minutes ago, <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/users/cap&quot;</c-><c- p>&gt;</c->cap<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> wrote: <c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-> <c- e>srcdoc</c-><c- o>=</c-><c- s>&quot;&lt;p&gt;Yeah, you can see it &lt;a href=&amp;quot;/gallery?mode=cover&amp;amp;amp;page=1&amp;quot;&gt;in my gallery&lt;/a&gt;.&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c-> Five minutes ago, <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/users/ch&quot;</c-><c- p>&gt;</c->ch<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> wrote: <c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-> <c- e>srcdoc</c-><c- o>=</c-><c- s>&quot;&lt;p&gt;hey that&apos;s earl&apos;s table.</c->
<c- s>&lt;p&gt;you should get earl&amp;amp;amp;me on the next cover.&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

   <p>Notice the way that quotes have to be escaped (otherwise the <code id=the-iframe-element:attr-iframe-srcdoc-4><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute would end prematurely), and the way raw
   ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be
   <em>doubly</em> escaped — once so that the ampersand is preserved when originally parsing
   the <code id=the-iframe-element:attr-iframe-srcdoc-5><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute, and once more to prevent the
   ampersand from being misinterpreted when parsing the sandboxed content.</p>

   <p>Furthermore, notice that since the <a href=syntax.html#syntax-doctype id=the-iframe-element:syntax-doctype-2>DOCTYPE</a> is optional in
   <a href=#an-iframe-srcdoc-document id=the-iframe-element:an-iframe-srcdoc-document><code>iframe</code> <code>srcdoc</code> documents</a>, and the <code id=the-iframe-element:the-html-element-2><a href=semantics.html#the-html-element>html</a></code>,
   <code id=the-iframe-element:the-head-element><a href=semantics.html#the-head-element>head</a></code>, and <code id=the-iframe-element:the-body-element><a href=sections.html#the-body-element>body</a></code> elements have <a href=syntax.html#syntax-tag-omission>optional
   start and end tags</a>, and the <code id=the-iframe-element:the-title-element><a href=semantics.html#the-title-element>title</a></code> element is also optional in <a href=#an-iframe-srcdoc-document id=the-iframe-element:an-iframe-srcdoc-document-2><code>iframe</code> <code>srcdoc</code>
   documents</a>, the markup in a <code id=the-iframe-element:attr-iframe-srcdoc-6><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute can be
   relatively succinct despite representing an entire document, since only the contents of the
   <code id=the-iframe-element:the-body-element-2><a href=sections.html#the-body-element>body</a></code> element need appear literally in the syntax. The other elements are still
   present, but only by implication.</p>

  </div>

  <p class=note>In <a id=the-iframe-element:syntax-2 href=syntax.html#syntax>the HTML syntax</a>, authors need only remember to use U+0022
  QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0026
  AMPERSAND (&amp;) and U+0022 QUOTATION MARK (") characters, and to specify the <code id=the-iframe-element:attr-iframe-sandbox-3><a href=#attr-iframe-sandbox>sandbox</a></code> attribute, to ensure safe embedding of content. (And
  remember to escape ampersands before quotation marks, to ensure quotation marks become &amp;quot;
  and not &amp;amp;quot;.)</p>

  <p class=note>In XML the U+003C LESS-THAN SIGN character (&lt;) needs to be escaped as well. In
  order to prevent <a href=https://www.w3.org/TR/xml/#AVNormalize>attribute-value
  normalization</a>, some of XML's whitespace characters — specifically U+0009 CHARACTER
  TABULATION (tab), U+000A LINE FEED (LF), and U+000D CARRIAGE RETURN (CR) — also need to be
  escaped. <a href=references.html#refsXML>[XML]</a></p>

  <p class=note>If the <code id=the-iframe-element:attr-iframe-src-3><a href=#attr-iframe-src>src</a></code> attribute and the <code id=the-iframe-element:attr-iframe-srcdoc-7><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute are both specified together, the <code id=the-iframe-element:attr-iframe-srcdoc-8><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute takes priority. This allows authors to provide
  a fallback <a id=the-iframe-element:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> for legacy user agents that do not support the <code id=the-iframe-element:attr-iframe-srcdoc-9><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute.</p>


  

  

  <p class=note>If, when the element is created, the <code id=the-iframe-element:attr-iframe-srcdoc-10><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute is not set, and the <code id=the-iframe-element:attr-iframe-src-4><a href=#attr-iframe-src>src</a></code> attribute is either also not set or set but its value cannot
  be <span>parsed</span>, the element's <a id=the-iframe-element:content-navigable-5 href=document-sequences.html#content-navigable>content
  navigable</a> will remain at the <a href=dom.html#is-initial-about:blank id=the-iframe-element:is-initial-about:blank>initial
  <code>about:blank</code></a> <code>Document</code>.</p>

  <p class=note>If the user <a href=browsing-the-web.html#navigate id=the-iframe-element:navigate>navigates</a> away from this page, the
  <code id=the-iframe-element:the-iframe-element-6><a href=#the-iframe-element>iframe</a></code>'s <a id=the-iframe-element:content-navigable-6 href=document-sequences.html#content-navigable>content navigable</a>'s <a href=document-sequences.html#nav-wp id=the-iframe-element:nav-wp>active
  <code>WindowProxy</code></a> object will proxy new <code>Window</code> objects for new
  <code>Document</code> objects, but the <code id=the-iframe-element:attr-iframe-src-5><a href=#attr-iframe-src>src</a></code> attribute will
  not change.</p>


  <hr> 

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-name data-dfn-type=element-attr><code>name</code></dfn>
  attribute, if present, must be a <a id=the-iframe-element:valid-navigable-target-name href=document-sequences.html#valid-navigable-target-name>valid navigable target name</a>. The given value is
  used to name the element's <a id=the-iframe-element:content-navigable-7 href=document-sequences.html#content-navigable>content navigable</a> if present when that is <a href=document-sequences.html#create-a-new-child-navigable id=the-iframe-element:create-a-new-child-navigable>created</a>.</p>


  <hr> 

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox title="The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.">Element/iframe#attr-sandbox</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>17+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=iframe id=attr-iframe-sandbox data-dfn-type=element-attr><code>sandbox</code></dfn>
  attribute, when specified, enables a set of extra restrictions on any content hosted by the
  <code id=the-iframe-element:the-iframe-element-7><a href=#the-iframe-element>iframe</a></code>. Its value must be an <a id=the-iframe-element:unordered-set-of-unique-space-separated-tokens href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated
  tokens</a> that are <a id=the-iframe-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>. The allowed values are:</p>

  <ul class=brief><li><code>allow-downloads</code><li><code>allow-forms</code><li><code>allow-modals</code><li><code>allow-orientation-lock</code><li><code>allow-pointer-lock</code><li><code>allow-popups</code><li><code>allow-popups-to-escape-sandbox</code><li><code>allow-presentation</code><li><code>allow-same-origin</code><li><code>allow-scripts</code><li><code>allow-top-navigation</code><li><code>allow-top-navigation-by-user-activation</code><li><code>allow-top-navigation-to-custom-protocols</code></ul>

  <p>When the attribute is set, the content is treated as being from a unique <a href=browsers.html#concept-origin-opaque id=the-iframe-element:concept-origin-opaque>opaque origin</a>, forms, scripts, and various potentially
  annoying APIs are disabled, and links are prevented from targeting other <a href=document-sequences.html#navigable id=the-iframe-element:navigable>navigables</a>. The <code>allow-same-origin</code> keyword causes the
  content to be treated as being from its real origin instead of forcing it into an <a href=browsers.html#concept-origin-opaque id=the-iframe-element:concept-origin-opaque-2>opaque origin</a>; the <code>allow-top-navigation</code> keyword allows the
  content to <a id=the-iframe-element:navigate-2 href=browsing-the-web.html#navigate>navigate</a> its <a href=document-sequences.html#nav-traversable id=the-iframe-element:nav-traversable>traversable navigable</a>;
  the <code>allow-top-navigation-by-user-activation</code>
  keyword behaves similarly but allows such <a href=browsing-the-web.html#navigate id=the-iframe-element:navigate-3>navigation</a> only when the
  browsing context's <a href=document-sequences.html#nav-window id=the-iframe-element:nav-window>active window</a> has <span>transient
  activation</span>; the <code>allow-top-navigation-to-custom-protocols</code>
  reenables navigations toward non <a id=the-iframe-element:fetch-scheme href=https://fetch.spec.whatwg.org/#fetch-scheme data-x-internal=fetch-scheme>fetch scheme</a> to be <a href=browsing-the-web.html#hand-off-to-external-software id=the-iframe-element:hand-off-to-external-software>handed off to external software</a>; and the <code>allow-forms</code>, <code>allow-modals</code>, <code>allow-orientation-lock</code>, <code>allow-pointer-lock</code>, <code>allow-popups</code>, <code>allow-presentation</code>, <code>allow-scripts</code>, and <code>allow-popups-to-escape-sandbox</code>
  keywords re-enable forms, modal dialogs, screen orientation lock, the pointer lock API, popups,
  the presentation API, scripts, and the creation of unsandboxed <a href=document-sequences.html#auxiliary-browsing-context id=the-iframe-element:auxiliary-browsing-context>auxiliary browsing contexts</a> respectively. The <code>allow-downloads</code> keyword allows content to
  perform downloads. <a href=references.html#refsPOINTERLOCK>[POINTERLOCK]</a> <a href=references.html#refsSCREENORIENTATION>[SCREENORIENTATION]</a> <a href=references.html#refsPRESENTATION>[PRESENTATION]</a></p>

  <p>The <code>allow-top-navigation</code> and <code>allow-top-navigation-by-user-activation</code>
  keywords must not both be specified, as doing so is redundant; only <code>allow-top-navigation</code> will have an effect
  in such non-conformant markup.</p>

  <p>Similarly, the <code>allow-top-navigation-to-custom-protocols</code>
  keyword must not be specified if either <code>allow-top-navigation</code> or <code>allow-popups</code> are specified, as doing so is
  redundant.</p>

  <p class=note>To allow <code id=the-iframe-element:dom-alert><a href=timers-and-user-prompts.html#dom-alert>alert()</a></code>, <code id=the-iframe-element:dom-confirm><a href=timers-and-user-prompts.html#dom-confirm>confirm()</a></code>, and <code id=the-iframe-element:dom-prompt><a href=timers-and-user-prompts.html#dom-prompt>prompt()</a></code> inside
  sandboxed content, both the <code>allow-modals</code>
  and <code>allow-same-origin</code> keywords need to
  be specified, and the loaded URL needs to be <a id=the-iframe-element:same-origin href=browsers.html#same-origin>same origin</a> with the <span>top-level
  origin</span>. Without the <code>allow-same-origin</code> keyword, the content is
  always treated as cross-origin, and cross-origin content <span>cannot show simple
  dialogs</span>.</p>

  <p class=warning>Setting both the <code>allow-scripts</code> and <code>allow-same-origin</code> keywords together when the
  embedded page has the <a id=the-iframe-element:same-origin-2 href=browsers.html#same-origin>same origin</a> as the page containing the <code id=the-iframe-element:the-iframe-element-8><a href=#the-iframe-element>iframe</a></code>
  allows the embedded page to simply remove the <code id=the-iframe-element:attr-iframe-sandbox-4><a href=#attr-iframe-sandbox>sandbox</a></code>
  attribute and then reload itself, effectively breaking out of the sandbox altogether.</p>

  <p class=warning>These flags only take effect when the <a id=the-iframe-element:content-navigable-8 href=document-sequences.html#content-navigable>content navigable</a> of the
  <code id=the-iframe-element:the-iframe-element-9><a href=#the-iframe-element>iframe</a></code> element is <a href=browsing-the-web.html#navigate id=the-iframe-element:navigate-4>navigated</a>. Removing them, or
  removing the entire <code id=the-iframe-element:attr-iframe-sandbox-5><a href=#attr-iframe-sandbox>sandbox</a></code> attribute, has no effect on
  an already-loaded page.</p>

  <p class=warning>Potentially hostile files should not be served from the same server as the file
  containing the <code id=the-iframe-element:the-iframe-element-10><a href=#the-iframe-element>iframe</a></code> element. Sandboxing hostile content is of minimal help if an
  attacker can convince the user to just visit the hostile content directly, rather than in the
  <code id=the-iframe-element:the-iframe-element-11><a href=#the-iframe-element>iframe</a></code>. To limit the damage that can be caused by hostile HTML content, it should be
  served from a separate dedicated domain. Using a different domain ensures that scripts in the
  files are unable to attack the site, even if the user is tricked into visiting those pages
  directly, without the protection of the <code id=the-iframe-element:attr-iframe-sandbox-6><a href=#attr-iframe-sandbox>sandbox</a></code>
  attribute.</p>

  

  <div class=example>

   <p>In this example, some completely-unknown, potentially hostile, user-provided HTML content is
   embedded in a page. Because it is served from a separate domain, it is affected by all the normal
   cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled,
   forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or
   windows it itself embeds).</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->We&apos;re not scared of you! Here is your content, unedited:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;https://usercontent.example.net/getusercontent.cgi?id=12193&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>

   <p class=warning>It is important to use a separate domain so that if the attacker convinces the
   user to visit that page directly, the page doesn't run in the context of the site's origin, which
   would make the user vulnerable to any attack found in the page.</p>

  </div>

  <div class=example>

   <p>In this example, a gadget from another site is embedded. The gadget has scripting and forms
   enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with
   its originating server. The sandbox is still useful, however, as it disables plugins and popups,
   thus reducing the risk of the user being exposed to malware and other annoyances.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-><c- o>=</c-><c- s>&quot;allow-same-origin allow-forms allow-scripts&quot;</c->
        <c- e>src</c-><c- o>=</c-><c- s>&quot;https://maps.example.com/embedded.html&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Suppose a file A contained the following fragment:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-><c- o>=</c-><c- s>&quot;allow-same-origin allow-forms&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>B</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>

   <p>Suppose that file B contained an iframe also:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-><c- o>=</c-><c- s>&quot;allow-scripts&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>C</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>

   <p>Further, suppose that file C contained a link:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>D</c-><c- p>&gt;</c->Link<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></code></pre>

   <p>For this example, suppose all the files were served as <code>text/html</code>.</p>

   <p>Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the
   <code id=the-iframe-element:the-iframe-element-12><a href=#the-iframe-element>iframe</a></code> in A has scripts disabled, and this overrides the <code>allow-scripts</code> keyword set on the
   <code id=the-iframe-element:the-iframe-element-13><a href=#the-iframe-element>iframe</a></code> in B. Forms are also disabled, because the inner <code id=the-iframe-element:the-iframe-element-14><a href=#the-iframe-element>iframe</a></code> (in B)
   does not have the <code>allow-forms</code> keyword
   set.</p>

   <p>Suppose now that a script in A removes all the <code id=the-iframe-element:attr-iframe-sandbox-7><a href=#attr-iframe-sandbox>sandbox</a></code> attributes in A  and B.
   This would change nothing immediately. If the user clicked the link in C, loading page D into
   the <code id=the-iframe-element:the-iframe-element-15><a href=#the-iframe-element>iframe</a></code> in B, page D would now act as if the <code id=the-iframe-element:the-iframe-element-16><a href=#the-iframe-element>iframe</a></code> in B had the
   <code>allow-same-origin</code> and <code>allow-forms</code> keywords set, because that was the
   state of the <a id=the-iframe-element:content-navigable-9 href=document-sequences.html#content-navigable>content navigable</a> in the <code id=the-iframe-element:the-iframe-element-17><a href=#the-iframe-element>iframe</a></code> in A when page B was
   loaded.</p>

   <p>Generally speaking, dynamically removing or changing the <code id=the-iframe-element:attr-iframe-sandbox-8><a href=#attr-iframe-sandbox>sandbox</a></code> attribute is ill-advised, because it can make it quite
   hard to reason about what will be allowed and what will not.</p>

  </div>


  <hr> 

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-allow data-dfn-type=element-attr><code>allow</code></dfn>
  attribute, when specified, determines the <a href=https://w3c.github.io/webappsec-feature-policy/#container-policy id=the-iframe-element:concept-container-policy data-x-internal=concept-container-policy>container
  policy</a> that will be used when the <a href=dom.html#concept-document-permissions-policy id=the-iframe-element:concept-document-permissions-policy>permissions policy</a> for a
  <code>Document</code> in the <code id=the-iframe-element:the-iframe-element-18><a href=#the-iframe-element>iframe</a></code>'s <a id=the-iframe-element:content-navigable-10 href=document-sequences.html#content-navigable>content navigable</a> is initialized.
  Its value must be a <a href=https://w3c.github.io/webappsec-feature-policy/#serialized-permissions-policy id=the-iframe-element:concept-serialized-permissions-policy data-x-internal=concept-serialized-permissions-policy>serialized permissions
  policy</a>. <a href=references.html#refsPERMISSIONSPOLICY>[PERMISSIONSPOLICY]</a></p>

  <div class=example>
   <p>In this example, an <code id=the-iframe-element:the-iframe-element-19><a href=#the-iframe-element>iframe</a></code> is used to embed a map from an online navigation
   service. The <code id=the-iframe-element:attr-iframe-allow-2><a href=#attr-iframe-allow>allow</a></code> attribute is used to enable the
   Geolocation API within the nested context.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;https://maps.example.com/&quot;</c-> <c- e>allow</c-><c- o>=</c-><c- s>&quot;geolocation&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-allowfullscreen data-dfn-type=element-attr><code>allowfullscreen</code></dfn> attribute is a <a id=the-iframe-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a>. When specified, it indicates that <code>Document</code> objects in the
  <code id=the-iframe-element:the-iframe-element-20><a href=#the-iframe-element>iframe</a></code> element's <a id=the-iframe-element:content-navigable-11 href=document-sequences.html#content-navigable>content navigable</a> will be initialized with a <a href=dom.html#concept-document-permissions-policy id=the-iframe-element:concept-document-permissions-policy-2>permissions policy</a> which allows the "<code>fullscreen</code>" feature to be used from any <a id=the-iframe-element:concept-origin href=browsers.html#concept-origin>origin</a>. This is enforced by
  the <a href=https://w3c.github.io/webappsec-feature-policy/#process-permissions-policy-attributes id=the-iframe-element:process-permissions-policy-attributes data-x-internal=process-permissions-policy-attributes>process permissions policy
  attributes</a> algorithm. <a href=references.html#refsPERMISSIONSPOLICY>[PERMISSIONSPOLICY]</a></p>

  <div class=example>

   <p>Here, an <code id=the-iframe-element:the-iframe-element-21><a href=#the-iframe-element>iframe</a></code> is used to embed a player from a video site. The <code id=the-iframe-element:attr-iframe-allowfullscreen-2><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> attribute is needed to enable the
   player to show its video fullscreen.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>header</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;/usericons/1627591962735&quot;</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Fred Flintstone<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/posts/3095182851&quot;</c-> <c- e>rel</c-><c- o>=</c-><c- s>bookmark</c-><c- p>&gt;</c->12:44<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> — <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#acl-3095182851&quot;</c-><c- p>&gt;</c->Private Post<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Check out my new ride!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;https://video.example.com/embed?id=92469812&quot;</c-> <c- e>allowfullscreen</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></strong>
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p class=note>Neither <code id=the-iframe-element:attr-iframe-allow-3><a href=#attr-iframe-allow>allow</a></code> nor <code id=the-iframe-element:attr-iframe-allowfullscreen-3><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> can grant access to a feature in an
  <code id=the-iframe-element:the-iframe-element-22><a href=#the-iframe-element>iframe</a></code> element's <a id=the-iframe-element:content-navigable-12 href=document-sequences.html#content-navigable>content navigable</a> if the element's <a id=the-iframe-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
  document</a> is not already allowed to use that feature.</p>

  

  <p class=warning>Because they only influence the <a href=dom.html#concept-document-permissions-policy id=the-iframe-element:concept-document-permissions-policy-3>permissions policy</a> of the <a id=the-iframe-element:content-navigable-13 href=document-sequences.html#content-navigable>content
  navigable</a>'s <a href=document-sequences.html#nav-document id=the-iframe-element:nav-document>active document</a>, the <code id=the-iframe-element:attr-iframe-allow-4><a href=#attr-iframe-allow>allow</a></code> and <code id=the-iframe-element:attr-iframe-allowfullscreen-4><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> attributes only take effect when the
  <a id=the-iframe-element:content-navigable-14 href=document-sequences.html#content-navigable>content navigable</a> of the <code id=the-iframe-element:the-iframe-element-23><a href=#the-iframe-element>iframe</a></code> is <a href=browsing-the-web.html#navigate id=the-iframe-element:navigate-5>navigated</a>. Adding or removing them has no effect on an already-loaded
  document.</p>


  <hr> 

  <p>The <code id=the-iframe-element:the-iframe-element-24><a href=#the-iframe-element>iframe</a></code> element supports <a id=the-iframe-element:dimension-attributes href=embedded-content-other.html#dimension-attributes>dimension attributes</a> for cases where the
  embedded content has specific dimensions (e.g. ad units have well-defined dimensions).</p>

  <p>An <code id=the-iframe-element:the-iframe-element-25><a href=#the-iframe-element>iframe</a></code> element never has <a id=the-iframe-element:fallback-content href=dom.html#fallback-content>fallback content</a>, as it will always
  <a id=the-iframe-element:create-a-new-child-navigable-2 href=document-sequences.html#create-a-new-child-navigable>create a new child navigable</a>, regardless of whether the specified initial
  contents are successfully used.</p>

  <hr> 

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-referrerpolicy data-dfn-type=element-attr><code>referrerpolicy</code></dfn> attribute is a
  <a id=the-iframe-element:referrer-policy-attribute href=urls-and-fetching.html#referrer-policy-attribute>referrer policy attribute</a>. Its purpose is to set the <a id=the-iframe-element:referrer-policy-2 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a>
  used when <span>processing the <code id=the-iframe-element:the-iframe-element-26><a href=#the-iframe-element>iframe</a></code>
  attributes</span>. <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a></p>

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-loading data-dfn-type=element-attr><code>loading</code></dfn> attribute is a <a id=the-iframe-element:lazy-loading-attribute href=urls-and-fetching.html#lazy-loading-attribute>lazy
  loading attribute</a>. Its purpose is to indicate the policy for loading <code id=the-iframe-element:the-iframe-element-27><a href=#the-iframe-element>iframe</a></code>
  elements that are outside the viewport.</p>

  <p>When the <code id=the-iframe-element:attr-iframe-loading-2><a href=#attr-iframe-loading>loading</a></code> attribute's state is changed to the
  <a href=urls-and-fetching.html#attr-loading-eager-state id=the-iframe-element:attr-loading-eager-state>Eager</a> state, the user agent must run these
  steps:</p>

  <ol><li><p>Let <var>resumptionSteps</var> be the <code id=the-iframe-element:the-iframe-element-28><a href=#the-iframe-element>iframe</a></code> element's <a id=the-iframe-element:lazy-load-resumption-steps href=urls-and-fetching.html#lazy-load-resumption-steps>lazy load
   resumption steps</a>.<li><p>If <var>resumptionSteps</var> is null, then return.<li><p>Set the <code id=the-iframe-element:the-iframe-element-29><a href=#the-iframe-element>iframe</a></code>'s <a id=the-iframe-element:lazy-load-resumption-steps-2 href=urls-and-fetching.html#lazy-load-resumption-steps>lazy load resumption steps</a> to null.<li><p>Invoke <var>resumptionSteps</var>.</ol>

  <hr> 

  <p>Descendants of <code id=the-iframe-element:the-iframe-element-30><a href=#the-iframe-element>iframe</a></code> elements represent nothing. (In legacy user agents that do
  not support <code id=the-iframe-element:the-iframe-element-31><a href=#the-iframe-element>iframe</a></code> elements, the contents would be parsed as markup that could act as
  fallback content.)</p>

  <p class=note>The <span>HTML parser</span> treats markup inside <code id=the-iframe-element:the-iframe-element-32><a href=#the-iframe-element>iframe</a></code> elements as
  text.</p>


  

  <div class=example>

   <p>Here is an example of a page using an <code id=the-iframe-element:the-iframe-element-33><a href=#the-iframe-element>iframe</a></code> to include advertising from an
   advertising broker:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;https://ads.example.com/?customerid=923513721&amp;amp;format=banner&quot;</c->
        <c- e>width</c-><c- o>=</c-><c- s>&quot;468&quot;</c-> <c- e>height</c-><c- o>=</c-><c- s>&quot;60&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>

  </div>




  <h4 id=the-embed-element><span class=secno>4.8.6</span> The <dfn data-dfn-type=element><code>embed</code></dfn> element<a href=#the-embed-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed title="The <embed> HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.">Element/embed</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>



  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-embed-element:concept-element-categories>Categories</a>:<dd><a id=the-embed-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-embed-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-embed-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd><a id=the-embed-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a id=the-embed-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-embed-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-embed-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-embed-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-embed-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-embed-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-embed-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-embed-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-embed-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-embed-element:attr-embed-src><a href=#attr-embed-src>src</a></code> —  Address of the resource
     <dd><code id=the-embed-element:attr-embed-type><a href=#attr-embed-type>type</a></code> —  Type of embedded resource
     <dd><code id=the-embed-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> —  Horizontal dimension
     <dd><code id=the-embed-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> —  Vertical dimension
     <dd>Any other attribute that has no namespace (see prose).<dt><a href=dom.html#concept-element-accessibility-considerations id=the-embed-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-embed>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-embed>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-embed-element:concept-element-dom>DOM interface</a>:<dd>
    
   </dl>

  <p>The <code id=the-embed-element:the-embed-element><a href=#the-embed-element>embed</a></code> element provides an integration point for an external application or
  interactive content.</p>

  <p>The <dfn data-dfn-for=embed id=attr-embed-src data-dfn-type=element-attr><code>src</code></dfn> attribute
  gives the <a id=the-embed-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the resource being embedded. The attribute, if present, must contain
  a <a id=the-embed-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a>.</p>

  <p>If the <code id=the-embed-element:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is specified on an
  <code id=the-embed-element:the-embed-element-2><a href=#the-embed-element>embed</a></code> element, then the <code id=the-embed-element:attr-embed-src-2><a href=#attr-embed-src>src</a></code> attribute must also
  be specified.</p>

  <p>The <dfn data-dfn-for=embed id=attr-embed-type data-dfn-type=element-attr><code>type</code></dfn> attribute,
  if present, gives the <a id=the-embed-element:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> by which the plugin to instantiate is selected. The
  value must be a <a id=the-embed-element:valid-mime-type-string href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid MIME type string</a>. If both the <code id=the-embed-element:attr-embed-type-2><a href=#attr-embed-type>type</a></code> attribute and the <code id=the-embed-element:attr-embed-src-3><a href=#attr-embed-src>src</a></code>
  attribute are present, then the <code id=the-embed-element:attr-embed-type-3><a href=#attr-embed-type>type</a></code> attribute must specify
  the same type as the <span>explicit Content-Type metadata</span> of the
  resource given by the <code id=the-embed-element:attr-embed-src-4><a href=#attr-embed-src>src</a></code> attribute.</p>

  

  <p>The <code id=the-embed-element:the-embed-element-3><a href=#the-embed-element>embed</a></code> element supports <a id=the-embed-element:dimension-attributes href=embedded-content-other.html#dimension-attributes>dimension attributes</a>.</p>




  <h4 id=the-object-element><span class=secno>4.8.7</span> The <dfn data-dfn-type=element><code>object</code></dfn> element<a href=#the-object-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object title="The <object> HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.">Element/object</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-object-element:concept-element-categories>Categories</a>:<dd><a id=the-object-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-object-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-object-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd><a href=forms.html#category-listed id=the-object-element:category-listed>Listed</a> <a id=the-object-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-object-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-object-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-object-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-object-element:concept-element-content-model>Content model</a>:<dd><a id=the-object-element:transparent href=dom.html#transparent>Transparent</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-object-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-object-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-object-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-object-element:attr-object-data><a href=#attr-object-data>data</a></code> —  Address of the resource
     <dd><code id=the-object-element:attr-object-type><a href=#attr-object-type>type</a></code> —  Type of embedded resource
     <dd><code id=the-object-element:attr-object-name><a href=#attr-object-name>name</a></code> —  Name of <a id=the-object-element:content-navigable href=document-sequences.html#content-navigable>content navigable</a>
     <dd><code id=the-object-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-object-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-object-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> —  Horizontal dimension
     <dd><code id=the-object-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> —  Vertical dimension
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-object-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-object>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-object>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-object-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLObjectElement</code>.</dl>

  <p>The <code id=the-object-element:the-object-element><a href=#the-object-element>object</a></code> element can represent an external resource, which, depending on the
  type of the resource, will either be treated as an image or as a <a id=the-object-element:child-navigable href=document-sequences.html#child-navigable>child
  navigable</a>.</p>

  <p>The <dfn data-dfn-for=object id=attr-object-data data-dfn-type=element-attr><code>data</code></dfn> attribute
  specifies the <a id=the-object-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the resource. It must be present, and must contain a
  <a id=the-object-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a>.</p>

  <p>The <dfn data-dfn-for=object id=attr-object-type data-dfn-type=element-attr><code>type</code></dfn> attribute,
  if present, specifies the type of the resource. If present, the attribute must be a <a id=the-object-element:valid-mime-type-string href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid
  MIME type string</a>.</p>

  <p>The <dfn data-dfn-for=object id=attr-object-name data-dfn-type=element-attr><code>name</code></dfn>
  attribute, if present, must be a <a id=the-object-element:valid-navigable-target-name href=document-sequences.html#valid-navigable-target-name>valid navigable target name</a>. The given value is
  used to name the element's <a id=the-object-element:content-navigable-2 href=document-sequences.html#content-navigable>content navigable</a>, if applicable, and if present when the
  element's <a id=the-object-element:content-navigable-3 href=document-sequences.html#content-navigable>content navigable</a> is <a href=document-sequences.html#create-a-new-child-navigable id=the-object-element:create-a-new-child-navigable>created</a>.</p>

  

  <p>The <code id=the-object-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-object-element:the-object-element-2><a href=#the-object-element>object</a></code> element with its <a id=the-object-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>.</p>

  <p>The <code id=the-object-element:the-object-element-3><a href=#the-object-element>object</a></code> element supports <a id=the-object-element:dimension-attributes href=embedded-content-other.html#dimension-attributes>dimension attributes</a>.</p>

  

  <div class=example>

   <p>In this example, an HTML page is embedded in another using the <code id=the-object-element:the-object-element-4><a href=#the-object-element>object</a></code>
   element.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>object</c-> <c- e>data</c-><c- o>=</c-><c- s>&quot;clock.html&quot;</c-><c- p>&gt;&lt;/</c-><c- f>object</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->My HTML Clock<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

  </div>


  <nav><a href=images.html>← 4.8.4 Images</a> — <a href=index.html>Table of Contents</a> — <a href=media.html>4.8.8 The video element →</a></nav>
